<template>
  <div class="wrapper">
    <dx-header-bar title="超标业务专题"></dx-header-bar>
    <div class="container">
      <div class="container-item" v-for="(item,index) in dataList" :key="index">
        <div class="title">
          <span class="line"></span>
          <span class="name">{{item.name}}</span>
        </div>
        <div class="line-wrapper">
          <div class="line-item" v-for="(list,index2) in dataList[index].data" :key="index2">
            <div class="left">
              <img class="img" :src="list.BUSINESS_TYPE === '互联网专线' ? net : tran"/>
              <p>{{list.BUSINESS_TYPE.substr(0,list.BUSINESS_TYPE.length-2)}}</p>
            </div>
            <div class="right" @click="openDetial(item.name,list.BUSINESS_TYPE)">{{list.num}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar } from '@/components';
import { Dialog } from 'mand-mobile';
import { getExcessiveCity } from '@/api/resource';
import { mapGetters } from 'vuex';
import internet from './internet.png';
import trans from './transmission.png';


export default {
  name: 'excessive',
  components: {
    DxHeaderBar
  },
  data() {
    return {
      dataList: [],
      net: internet,
      tran: trans,
      timestamp: Number(this.$route.query.timestamp)
    };
  },
  computed: {
    ...mapGetters([
      'domainId'
    ])
  },
  activated() {
    const time = Number(this.$route.query.timestamp);
    if (time !== this.timestamp) {
      this.loadExcessiveCity();
    }
  },
  created() {
    this.loadExcessiveCity();
  },
  methods: {
    loadExcessiveCity() {
      const params = {};
      getExcessiveCity(params).then(result => {
        const data = result.data;
        if (result.success) {
          const list = [];
          /* eslint-disable */
          for (const index in data) {
            list.push({ name: index, data: data[index] });
          }
          /* eslint-enable */
          this.dataList = list;
        } else {
          Dialog.alert({
            title: '提示',
            content: '暂无超标数据',
            confirmText: '确定'
          });
        }
      });
    },
    openDetial(name, type) {
      this.$router.push({
        name: 'excessiveDetial',
        query: {
          cityName: name,
          lineType: type
        }
      });
    }
  }
};
</script>

<style scoped lang="stylus">
  .wrapper
    height: 100%
    display: flex
    flex-direction: column

  .container
    flex: 1
    overflow-y: auto
    padding-top: 20px

  .container-item
    background: #fff

    .title
      font-size: 34px
      font-weight: bold
      padding: 20px
      line-height: 40px
      display: flex
      align-items: center

      .line
        margin-right: 20px
        width: 7px
        border-radius: 7px
        height: 40px
        background: #FF7F00
        display: inline-block

  .line-wrapper
    padding: 20px 47px
    font-size: 26px
    overflow: hidden

    .line-item
      float: left
      width: 45%
      padding: 20px
      margin-right: 10%
      margin-bottom: 20px
      background: #FFDFDF
      display: flex
      border-radius: 10px

      &:nth-of-type(2n)
        margin-right: 0
        background: #BFFFDF

      .left
        text-align center
        padding-left: 30px
        flex: 2

        .img
          width: 60px
          height: 60px
          margin: 0 auto
          margin-bottom: 20px

        p
          white-space: nowrap

      .right
        display: flex
        justify-content: center
        flex: 3
        align-items center
</style>
